<template>
  <div class="center-chart-1">
    <div class="title cursorPointer">产线效率</div>
    <div class="wrap">
      <template v-if="!noData">
        <div class="top">
          <span>当前生产工单</span>
          <el-select
            v-model="current"
            style="width: 55%"
            @change="handleCurrentChange"
          >
            <el-option
              v-for="item in orderList"
              :key="item.id"
              :value="item.id"
              :label="item.itemName"
            ></el-option>
          </el-select>
          <div>
            <span
              v-if="currentListItem.currentLineSpeed"
              :class="{
                green:
                  currentListItem.currentLineSpeed ==
                  currentListItem.ratedLineSpeed,
                'line-speed': true,
              }"
            >
              {{ currentListItem.currentLineSpeed }}bph
              <i
                v-if="
                  currentListItem.currentLineSpeed >
                  currentListItem.ratedLineSpeed
                "
                class="el-icon-top"
              ></i>
              <i
                v-if="
                  currentListItem.currentLineSpeed <
                  currentListItem.ratedLineSpeed
                "
                class="el-icon-bottom"
              ></i>
            </span>
          </div>
        </div>

        <el-carousel
          ref="Carousel"
          trigger="click"
          height="100%"
          indicator-position="none"
          :interval="10000"
          :autoplay="dateItem == defaultProduceDate"
          @change="handleCarouselChange"
        >
          <el-carousel-item
            v-for="(item, itemIndex) in orderList"
            :key="item.id"
            :name="item.id"
          >
            <div v-if="!!list[itemIndex]" class="process-contain">
              <div class="process-centent">
                <span>工单生产效率</span>
                <div class="process">
                  <div
                    :style="{
                      width: list[itemIndex].produceEfficiency + '%',
                    }"
                    class="process-inner"
                  ></div>
                </div>
                <span
                  :class="{
                    'produce-efficiency': true,
                    green: list[itemIndex].produceEfficiency >= 95,
                    red: list[itemIndex].produceEfficiency <= 90,
                  }"
                  >{{ list[itemIndex].produceEfficiency }}%</span
                >
              </div>
              <div class="process-centent">
                <span>工单工作时长</span>
                <div class="process">
                  <div
                    :style="{
                      width: (list[itemIndex].orderWorkHours / 12) * 100 + '%',
                    }"
                    class="process-inner"
                  ></div>
                </div>
                <span>
                  {{ list[itemIndex].orderWorkHours + "小时" }}
                </span>
              </div>
              <div class="process-centent">
                <span>工单计划完成率</span>
                <div class="process">
                  <div
                    :style="{
                      width: list[itemIndex].completeRate + '%',
                    }"
                    class="process-inner"
                  ></div>
                </div>
                <span>{{ list[itemIndex].completeRate }}%</span>
              </div>
              <div class="bottom">
                <div class="bottom-item">
                  <svg-icon class-name="kanban-icon" icon-class="kanbanIcon1" />
                  <span>计划产量</span>
                  <span>
                    {{ list[itemIndex].planQuantity || 0 }}
                    箱
                  </span>
                </div>
                <div class="bottom-item">
                  <svg-icon class-name="kanban-icon" icon-class="kanbanIcon2" />
                  <span>完工产量</span>
                  <span>
                    {{ list[itemIndex].completeQuantity || 0 }}
                    箱
                  </span>
                </div>
              </div>
            </div>
            <div v-else class="no-data"></div>
          </el-carousel-item>
        </el-carousel>
      </template>
      <div v-else class="no-data">产线停产中</div>
    </div>
  </div>
</template>

<script>
import {
  listOrderByLineProduceDate,
  getLineProduceInfo,
} from "@/api/dashboard/blowIrriagtionSpinLineDaily";
export default {
  name: "CenterChart1",
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    dateItem: {
      type: String,
      default: "",
    },
    defaultProduceDate: {
      type: String,
      default: "",
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      current: "",
      orderList: [],
      list: [],
    };
  },
  computed: {
    noData() {
      return !this.orderList?.length;
    },
    currentListItem() {
      if (!this.current) {
        return {};
      }
      const index = this.orderList.findIndex((o) => o.id == this.current);
      const list = this.list;

      return {
        currentLineSpeed: list[index]?.currentLineSpeed || 0,
        ratedLineSpeed: list[index]?.ratedLineSpeed || 0,
      };
    },
  },
  created() {
    this.getListOrder();
  },
  methods: {
    // 查询未关闭的工单
    getListOrder() {
      if (!this.lineItem || !this.dateItem) {
        return;
      }
      const param = {
        lineId: this.lineItem.value,
        produceDate: this.dateItem,
      };
      listOrderByLineProduceDate(param)
        .then((res) => {
          if (res?.data?.length) {
            this.orderList = res?.data;
          } else {
            this.orderList = [];
          }
        })
        .catch(() => {
          this.orderList = [];
        })
        .finally(() => {
          if (this.orderList?.length) {
            let currentOrderIndex = this.orderList.findIndex(
              (ele) => ele.id == this.current
            );

            // 重置为第一页
            if (currentOrderIndex == -1) {
              this.current = this.orderList[0].id;
              currentOrderIndex = 0;
            }

            // 划到对应的页
            this.$nextTick(() => {
              if (this.$refs.Carousel) {
                this.$refs.Carousel.setActiveItem(currentOrderIndex);
              }
            });

            this.list = new Array(this.orderList.length);
            this.getLineProduceInfo();
          } else {
            this.current = null;
          }

          this.$emit("order-change", this.getCurrentObject());
        });
    },
    // 查询产线生产情况
    getLineProduceInfo() {
      const orderIndex = this.orderList.findIndex(
        (ele) => ele.id == this.current
      );
      if (orderIndex == -1) {
        return;
      }
      // 已有数据，不再请求
      if (this.list[orderIndex]) {
        return;
      }
      const param = {
        orderId: this.current,
      };
      getLineProduceInfo(param).then((res) => {
        let data = res?.data || {};
        // 工单生产效率，保留两位小数
        data.produceEfficiency = data.produceEfficiency
          ? this.toFix(data.produceEfficiency * 100, 2)
          : 0;
        // 工单工作时长保留两位小数，保留两位小数
        data.orderWorkHours = data.orderWorkHours
          ? this.toFix(data.orderWorkHours, 2)
          : 0;
        // 工单计划完成率，保留两位小数
        data.completeRate = data.completeRate
          ? this.toFix(data.completeRate * 100, 2)
          : 0;
        this.$set(this.list, orderIndex, data);
      });
    },
    // 轮播图切换
    handleCarouselChange(index) {
      this.current = this.orderList[index].id;
      this.$emit("order-change", this.getCurrentObject());
      this.getLineProduceInfo();
    },
    // 当前工单切换
    handleCurrentChange(value) {
      if (this.$refs.Carousel) {
        const index = this.orderList.findIndex((ele) => ele.id == value);
        this.$refs.Carousel.setActiveItem(index);
      }
    },
    // 获取current对应的对象
    getCurrentObject() {
      if (!this.current || !this.orderList?.length) {
        return null;
      }
      const obj = this.orderList.find((o) => o.id == this.current);
      return obj || null;
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getListOrder();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.center-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 30px 42px 30px 46px;
  }

  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .line-speed {
    font-weight: 600;
    color: #ff5050;
    i {
      font-weight: 600;
    }
    &.green {
      color: #74d047;
    }
  }
  .el-carousel {
    flex: 1;
    width: 100%;
  }
  .process-contain {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &::before {
      content: "";
      flex: 1;
    }
  }
  .process-centent {
    flex: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > span:first-child {
      flex: 5;
    }
    & > span:last-child {
      flex: 4;
      text-align: center;
    }
    .process {
      flex: 10;
      height: 45%;
      max-height: 22px;
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
      background: #ffffff6e;
      &-inner {
        height: 100%;
        background: #74d047;
      }
    }
    .produce-efficiency {
      color: rgb(250, 200, 88);
      &.green {
        color: #74d047;
      }
      &.red {
        color: #ff5050;
      }
    }
  }
  .bottom {
    flex: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 16px;
      &:first-child {
        color: #27bbff;
      }
      &:last-child {
        color: #74d047;
      }
      span:last-child {
        margin-left: 20px;
      }
    }
  }
}
::v-deep .el-input.el-input--suffix {
  // 2.修改背景颜色、字体颜色、边框、宽高
  .el-input__inner {
    background: #010d50 !important;
    // border: 1px solid #010d50;
    border: 1px solid #fff;
    color: #fff;
    height: 30px;
  }

  // 符号的位置会错乱，进行修正（水平）
  .el-input__suffix-inner {
    position: absolute;
    left: -25px;
  }

  // 符号的位置会错乱，进行修正（垂直）
  .el-select__caret.el-input__icon.el-icon-arrow-up {
    line-height: 30px;
  }

  .el-input__inner::placeholder {
    color: #fff;
  }

  .el-icon-arrow-up:before {
    color: #fff;
  }
}

::v-deep .el-carousel__item.is-animating {
  transition-duration: 1s;
}
.kanban-icon {
  font-size: 22px;
  margin-right: 5px;
}

::v-deep {
  .el-input--medium {
    font-size: 14px;
  }
  .el-input--medium .el-input__inner {
    line-height: 36px;
    padding-right: 30px;
  }
  .el-input__suffix {
    right: 5px;
  }
  .el-input--medium .el-input__icon {
    line-height: 36px;
  }
  .el-select .el-input .el-select__caret {
    font-size: 14px;
  }
}
</style>
